Aim: I want to render 64 <Square /> elements with <br/> after each 8 elements
Problem: The script outputs just one block and then stops and nothing more happens.
Source Code:
import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
class Square extends React.Component {
render() {
return <div id="block"></div>;
}
}
class Board extends React.Component {
renderSquare() {
for (let i = 1; i <= 64; i++) {
if (i % 8 == 0) {
return <br />;
} else {
return <Square />;
}
}
}
render() {
return <div>{this.renderSquare()}</div>;
}
}
function Game() {
return (
<div id="board">
<Board />
</div>
);
}
ReactDOM.render(<Game />, document.getElementById('root'));
Using return statement will exit the function after first match, hence in first loop it exits and only displays 1st element, you need to use an array, store the elements in it, and then return the array.
Change your renderSquare method to following
renderSquare() {
const items = [];
for (let i = 1; i <= 64; i++) {
if (i % 8 === 0) {
items.push(<br />);
} else {
items.push(<Square />);
}
}
return items;
}
Update
if you want to print 64 times then use the following
renderSquare() {
const items = [];
for (let i = 1; i <= 64; i++) {
items.push(<Square />);
if (i % 8 === 0) {
items.push(<br />);
}
}
return items;
}
Check this https://codesandbox.io/s/peaceful-brattain-pj32le?file=/src/App.js